<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 600px;
				height: 80px;
				background-color: whitesmoke;
				border: 1px solid whitesmoke;
			}

			#box2 {
				width: 600px;
				height: 40px;
				background-color: white;
				margin: 7px 0 0 0;
				border-bottom: 1px solid whitesmoke;
				overflow: hidden;
			}

			button {
				margin: 10px -428px 0 466px;
			}

			p {
				display: inline-block;
				position: relative;
			}

			#box3 {
				width: 1000px;
				height: 40px;
				line-height: 15px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<button type="button" id="left">《</button>
			<button type="button" id="right">》</button>
			<div id="box2">
				<div id="box3">

				</div>
			</div>
		</div>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var data = ["动物的嘎巴史蒂文动手的", "欧几哦哇的动安慰的话", "派人家我艾吉奥好的", "欧几哦哇的动", "打开本地哈达威的骄傲"];
			$.each(data, function(i, value) {
				$("#box3").append("<p class='p" + i + "'>　" + value + "　</p>");
			});
			$("#left").on("click", function() {
				$.each(data, function(i) {
					var a = $(".p" + i).css("left");
					console.log(a);
				});
				// var a = $(".p0").css("left");
				// var b = $(".p1").css("left");
				// var c = $(".p2").css("left");
				// console.log(a);
				// console.log(b);
				// console.log(c);
				var i = 0;
				var b = 100;
				var px = "-200px";
				var setint = setInterval(function() {
					$(".p"+i).animate({
						"left":"-=200px"
					},1000);
					// $("p").each(function() {
					// 	$(this).css({"left": b});
					// 	b -= 100;
					// });
					$("p").each(function() {
						t = $(this).css('left');
						console.log(t);
						 if(t == px){
							$(this).css({"left":"800px"});
						 }else{
							 $(this).animate({"left":"-=100px"},1000);
						 };
					});
					
					// var aa  = $(".p"+i).css("left");
					// if(aa == "-600px"){                
					// 	$(".p"+i).animate({
					// 		"left":px
					// 	},100)
					// clearInterval(setint);
					// if(i==5){
					// clearInterval(setint);
					// }
					i++;
				}, 10);
			});
		</script>
	</body>
</html>
